<template>
  <a-modal
    title="编辑考试"
    :destroyOnClose="true"
    :maskClosable="false"
    :keyboard="false"
    v-model:visible="visible"
    @ok="handleOk"
  >
    <a-spin :spinning="spinning">
      <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
        <a-form-item label="考试ID">
          <a-input v-model:value="formState.id" disabled style="width: 100%" />
        </a-form-item>
        <a-form-item label="考试试卷" name="paperId">
          <a-select v-model:value="formState.paperId" placeholder="请选择试卷" style="width: 100%">
            <a-select-option v-for="item in paperList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="开始时间" name="startTime">
          <a-date-picker
            v-model:value="formState.startTime"
            show-time
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="考试时长(秒)" name="duration" style="width: 100%">
          <a-input-number v-model:value="formState.duration" :min="1" :max="99999" style="width: 100%" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { defineComponent, toRefs, ref, watch, onMounted } from "vue";
import { editOrUpdateExam, getAllPaperNoPage, getExam } from "../../utils/api";
import moment from "moment";
import { message } from "ant-design-vue";

export default defineComponent({
  props: {
    data: Object,
  },
  setup(props, ctx) {
    const { visible, examId } = toRefs(props.data);
    const paperList = ref([]);
    const formRef = ref();
    const formState = ref();
    const spinning = ref(false);
    const rules = {
      paperId: [{ required: true, message: "请选择试卷", trigger: "blur", type: "number" }],
      startTime: [{ required: true, message: "请输入开始时间", trigger: "blur", type: "date" }],
      duration: [{ required: true, message: "请输入考试时长", trigger: "blur", type: "number" }],
    };

    const handleOk = () => {
      formRef.value
        .validate()
        .then(() => {
          let sendObj = Object.assign({}, formState.value);
          sendObj.startTime = sendObj.startTime.format("YYYY-MM-DD HH:mm:ss");
          editOrUpdateExam(sendObj).then((res) => {
            message.success(res.data.message);
            visible.value = false;
            ctx.emit("editFinish");
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    watch(visible, (value) => {
      if (!value) {
        return;
      }

      formState.value = {
        id: -1,
        paperId: null,
        startTime: null,
        duration: 1,
      };
      if (examId.value != -1) {
        spinning.value = true;
        getExam(examId.value).then((res) => {
          formState.value = res.data.data;
          formState.value.startTime = moment(formState.value.startTime, "YYYY-MM-DD HH:mm:ss");
          spinning.value = false;
        });
      }
    });

    const fetchPaperList = async () => {
      let result = await getAllPaperNoPage();
      paperList.value = result.data.data;
    };

    onMounted(() => {
      fetchPaperList();
    });

    return {
      formRef,
      formState,
      paperList,
      visible,
      examId,
      spinning,
      rules,
      handleOk,
      fetchPaperList,
    };
  },
});
</script>
